import { Button, Form } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
import { getSignLogsList, SignLogsListType } from './data';

const SignLogs: React.FC<any> = () => {
  const [form] = Form.useForm();
  const navigator = useNavigate();
  const authOptions = [
    {
      label: '所有',
      value: '0',
    },
    {
      label: '已认证',
      value: '2',
    },
    {
      label: '未认证',
      value: '4',
    },
    {
      label: '审核中',
      value: '1',
    },
  ];
  // 初始化字段定义
  const columns: YmColumnsType<SignLogsListType> = [
    {
      title: '司机姓名',
      dataIndex: 'personName',
      key: 'personName',
      render(value: number, record: any) {
        return (
          // <button
          //   className="ym-linkbutton"
          //   onClick={() => {
          //     navigator(`/recruit/SignDetail?recordId=${record.resumeId}`);
          //   }}
          // >
          //   {value}
          // </button>

          <Button
            type="text"
            size="small"
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
              navigator(`/recruit/SignDetail?resumeId=${record.resumeId}`);
            }}
          >
            <span className="safe-edu_table_operation_text">{value || '--'}</span>
          </Button>
        );
      },
      width: 140,
    },
    {
      title: '司机手机号',
      dataIndex: 'personPhone',
      key: 'personPhone',
      width: 140,
    },
    {
      title: '司机安全指数',
      dataIndex: 'driverSafetyIndex',
      width: 140,
      key: 'driverSafetyIndex',
    },
    {
      title: '实名',
      dataIndex: 'verifiedStatus',
      key: 'verifiedStatus',
      width: 140,
      render(value: number) {
        return <>{value == 1 ? '审核中' : value == 2 ? '已认证' : value == 4 ? '未认证' : '--'}</>;
      },
    },
    {
      title: '驾驶证',
      dataIndex: 'drivingLicenseStatus',
      key: 'drivingLicenseStatus',
      width: 140,
      render(value: number) {
        return <>{value == 1 ? '审核中' : value == 2 ? '已认证' : value == 4 ? '未认证' : '--'}</>;
      },
    },
    {
      title: '最新签字时间',
      dataIndex: 'signatureTime',
      key: 'signatureTime',
      width: 140,
    },
  ];
  // 不用监听，不可能用户一直改变浏览器大小
  const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  return (
    <div className="safe_boss_page" style={{}}>
      <YmTable
        wrapperStyle={{ background: '#FFF' }}
        searchForm={{
          formItems: [
            {
              label: '司机姓名',
              name: 'personName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入司机姓名',
                },
              },
            },
            {
              label: '司机手机号',
              name: 'personPhone',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入司机手机号',
                },
              },
            },
            {
              label: '实名认证',
              name: 'verifiedStatus',
              valueType: {
                type: 'select',
                selectProps: {
                  options: authOptions,
                },
              },
            },
          ],
          span: pageWidth < 1320 ? 12 : 6,
          labelCol: { style: { width: 108 } },
          form: form,
        }}
        columns={columns}
        request={async ({ page }, form) => {
          const { current = 1, pageSize = 10 } = page ?? {};
          const response = await getSignLogsList({
            pageIndex: current,
            pageSize,
            ...form,
          });
          return response;
        }}
        requestOptions={{
          reFreshDep: [],
        }}
        rowKey="eventId"
      />
    </div>
  );
};
export default SignLogs;
